<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="5">
    <title>Title</title>
    <script src="Tronke.Ajax.js"></script>
    <style>
        table, tr, td, th {
            border: 1px solid #0094ff;
            text-align: center;
        }

        table {
            width: 600px;
        }
    </style>
</head>
<body>


<table cellspacing="0" cellpadding="0">
    <thead>
    <tr>
        <th>用户名</th>
        <th>姓名</th>
        <th>手机号</th>
        <th>QQ</th>
        <th style="width: 200px">地址</th>
    </tr>
    </thead>
    <tbody id="tab">
    <!--<tr>-->
    <!--<td></td>-->
    <!--</tr>-->

    </tbody>
</table>

<select id="sel">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>
</body>
</html>
<script>


     var count=0;//总条数
    var tab = document.getElementById('tab');
    var obj = {
        url: "http://10.36.132.104/userinfo/getlist",
        type: 'post',
        dataType: 'json',
        data: {"page": 1, "pageSize": 100},
        success: function (result) {
            console.log(result.Rows);
            loadTab(result)
            count=result.Total;
        }
    }



     ajax(obj);

     function loadTab(result) {
        for (var i = 0; i < result.Rows.length; i++) {
            var row = tab.insertRow(-1);

            var cel0 = row.insertCell(-1);
            cel0.innerHTML = result.Rows[i]["LoginName"];

            var cel1 = row.insertCell(-1);
            cel1.innerHTML = result.Rows[i]["UserName"];

            var cel2 = row.insertCell(-1);
            cel2.innerHTML = result.Rows[i]["TelPhone"];

            var cel3 = row.insertCell(-1);
            cel3.innerHTML = result.Rows[i]["QQ"];

            var cel4 = row.insertCell(-1);
            cel4.innerHTML = result.Rows[i]["Address"];
        }
    }


    //改变下拉内容的时候。触发
    document.getElementById('sel').onchange = function () {
        console.log(this.value);
        var obj = {
            url: "http://10.36.132.104/userinfo/getlist",
            type: 'post',
            dataType: 'json',
            data: {"page": this.value, "pageSize": 15},
            success: function (result) {

                console.log(result);
                tab.innerHTML = "";
                loadTab(result)
            }
        }
        ajax(obj)


    }

</script>

<!--
33  条数据
 每一页 10, 一共有多少页

 var pageIndex="第几页"
 var pageSize="每一页多少条"


 开始条件 (pageIndex-1)*pageSize
 结束条件  pageIndex*pageSize


-->
      <!--1-1  *   5=0          1*5=5         (2-1)*5=5   2*5=10-->
<!--（（第1页-1）*页大小）       页大小*页数-->
<!--
每一页5条     7    2
2.。。      0
4.。。      1
7.。。      2
9.999      3
11.22DSAF  4

12.RGWGW  5
13.FLM;   6


-->